<template>
  <div ref="pieRef" style="width: 100%; height: 35vh"></div>
</template>

<script setup lang="ts">
import { ref, unref } from 'vue'
import useEchart from '@/hooks/useEchart'
import * as echarts from 'echarts'
import type { EChartsOption } from 'echarts'

const pieRef = ref<HTMLElement>()

const data = ref([120, 200, 150, 80, 70, 110, 130])
const option: EChartsOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    top: -10
  },
  toolbox: {
    feature: {
      dataView: {
        show: false
      },
      magicType: {
        show: true,
        type: ['line', 'bar']
      },
      restore: {
        show: false
      },
      saveAsImage: {
        show: true,
        name: '月份图',
        pixelRatio: 2
      }
    },
    // iconStyle: {
    //   normal: {
    //     borderColor: '#1990DA'
    //   }
    // },
    top: 0,
    right: 5
  },
  xAxis: {
    type: 'category',
    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
    axisLine: {
      show: true,
      lineStyle: {
        color: '#24529b'
      }
    },

    axisLabel: {
      color: '#5c7bd9'
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    axisLine: {
      show: true,
      lineStyle: {
        color: '#24529b'
      }
    },
    splitLine: {
      lineStyle: {
        color: '#24529b'
      }
    },
    axisLabel: {
      color: '#5c7bd9'
    }
  },
  series: [
    {
      data: data.value,
      type: 'bar',
      barWidth: 20,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#01acff' },
          { offset: 0.5, color: '#0278ff' },
          { offset: 1, color: '#0344ff' }
        ])
      }
    }
  ]
}

const { myChart } = useEchart(pieRef, option)
setInterval(() => {
  data.value.sort(function () {
    return Math.random() - 0.5
  })
  unref(myChart)?.setOption(option)
}, 1000)
</script>
